<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(../Build/CesiumUnminified/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .canvas {
        position: absolute;
        left: 10px;
        top: 10px;
        display:none;
    }
    #canvas-a {
        top: 10px;
    }
    #canvas-b {
        top: 120px;
    }
    </style>
</head>

<body>
        <div id="cesiumContainer" class="fullSize">
        <div id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">cesium中文网 http://cesium.xin </a></div>
    </div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
    <canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', 
        {
            imageryProvider: new Cesium.SingleTileImageryProvider({
               url: '../img/worldimage.jpg'
            }),

            homeButton: false,
            //sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
            vrButton: false
        });
        function computeCircle(radius) {
            var positions = [];
            for (var i = 0; i < 360; i++) {
                var radians = Cesium.Math.toRadians(i);
                positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
            }
            return positions;
        }
        var startTime = Cesium.JulianDate.now();
        // var redTube = viewer.entities.add({
        //     name : 'Red tube with rounded corners',
        //     polylineVolume : {
        //         positions : Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,
        //                                                         -85.0, 36.0]),
        //                                                         // ,
        //                                                         // -89.0, 36.0]),
        //         shape : computeCircle(6000.0),
        //         // material : Cesium.Color.RED.withAlpha(0.5)
        //         //  material : './lesson29/arrow.png'
        //         // material:new Cesium.ImageMaterialProperty({
        //         //         image:'./lesson29/arrow.png',
        //         //         repeat:new Cesium.Cartesian2(30.0, 1.0),
        //         //         color:Cesium.Color.RED.withAlpha(0.5),
        //         //         // transparent:true
        //         //     })

        //         // material : new Cesium.CallbackProperty(function(){
        //         //     return  new Cesium.ImageMaterialProperty({
        //         //         image:'./lesson29/arrow.png',
        //         //         // repeat:new Cesium.Cartesian2(3.0, 1.0),
        //         //         // color:Cesium.Color.RED.withAlpha(0.5),
        //         //         // transparent:true
        //         //     })
        //         // }, false),
        //         // material : new Cesium.CallbackProperty(function() { return me.color;}, false),
                
        //         // material : new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function() { 
        //         //     return Cesium.Color.fromRandom({
        //         //         minimumRed : 0.75,
        //         //         minimumGreen : 0.75,
        //         //         minimumBlue : 0.75,
        //         //         alpha : 1.0
        //         //     });
                    
        //         //     }, false))

        //         material : new Cesium.ImageMaterialProperty(new Cesium.CallbackProperty(function() { 
        //             return  new Cesium.ImageMaterialProperty({
        //                     image:'./arrow.png',
        //                     // repeat:new Cesium.Cartesian2(3.0, 1.0),
        //                     // color:Cesium.Color.RED.withAlpha(0.5),
        //                     // transparent:true
        //                 });

            
        //         }, false))
        //     }
        // });

        // var redPlane = viewer.entities.add({
        //     name : 'Red plane with black outline',
        //     position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        //     plane : {
        //         plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
        //         dimensions : new Cesium.Cartesian2(400000.0, 300000.0),
        //         material : Cesium.Color.RED.withAlpha(0.5),
        //         outline : true,
        //         outlineColor : Cesium.Color.BLACK
        //     }
        // });
        // var redCorridor = viewer.entities.add({
        //     name : 'Red corridor on surface with rounded corners',
        //     corridor : {
        //         positions : Cesium.Cartesian3.fromDegreesArray([
        //                                                         -100.0, 40.0,
        //                                                         -105.0, 40.0,
        //                                                         -105.0, 35.0
        //                                                     ]),
        //                                                     width : 200000.0,
        //         // material : Cesium.Color.RED.withAlpha(0.5)
        //         material : './lesson29/arrow.png'
        //     }
        // });
        // var greenCorridor = viewer.entities.add({
        //     name : 'Green corridor at height with mitered corners and outline',
        //     corridor : {
        //         positions : Cesium.Cartesian3.fromDegreesArray([
        //                                                         -90.0, 40.0,
        //                                                         -95.0, 40.0,
        //                                                         -95.0, 35.0
        //                                                     ]),
        //                                                     height: 100000.0,
        //                                                     width : 200000.0,
        //         cornerType: Cesium.CornerType.MITERED,
        //         // material : Cesium.Color.GREEN,
        //         // material :new Cesium.ImageMaterialProperty({
        //         //     image:'./lesson29/arrow.png',
        //         //     repeat:new Cesium.Cartesian2(40.0, 4.0),
        //         //     transparent:true
                    

        //         // }),
        //         material : new Cesium.ImageMaterialProperty(new Cesium.CallbackProperty(function() { 
        //             return  new Cesium.ImageMaterialProperty({
        //                     image:'./arrow.png',
        //                     // repeat:new Cesium.Cartesian2(3.0, 1.0),
        //                     // color:Cesium.Color.RED.withAlpha(0.5),
        //                     // transparent:true
        //                 });

            
        //         }, true)),
        //         outline : true // height required for outlines to display
        //     }
        // });
        // viewer.zoomTo(viewer.entities);

        // var viewer = new Cesium.Viewer('cesiumContainer');

        var rotation = Cesium.Math.toRadians(30);
        var curCanvas = 'a';
        function getRotationValue() {
            rotation += 0.005;
            return rotation;
        }

        function drawCanvas(time, result) {
            var canvas = document.getElementById("canvas-" + curCanvas);
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = 'italic 40pt Calibri';
            context.fillStyle = "red";
            context.fillText(Cesium.JulianDate.toDate(Cesium.JulianDate.now()).getTime(), 20, 100);
            //console.log(Cesium.JulianDate.toDate(time).getTime());
            curCanvas = curCanvas === 'a' ? 'b' : 'a';
            return canvas;
        }

        let i = 0;
        function drawCanvasImage(time, result) {
            var canvas = document.getElementById("canvas-" + curCanvas);
            let cwidth = 700;
            let cheight = 100;
            let imgWidth = 60;
            let imgHeight = 34;
            var ctx=canvas.getContext("2d");
            var img=new Image();
            img.src="arrow.png";
            // let imgcount = cwidth/imgWidth
            ctx.clearRect(0,0,cwidth,cheight);
            img.onload = function() {
                if(i<=cwidth){
                    // for(let k=0;k<imgcount+1;k++)
                    //     ctx.drawImage(img,i+k*imgWidth,0);
                    ctx.drawImage(img,i,0,imgWidth,imgHeight);

                    // ctx.drawImage(img,0,0,imgWidth-i,imgHeight,imgcount*imgWidth+i,0,imgWidth-i,imgHeight);
                    // ctx.drawImage(img,imgWidth-i,0,i,imgHeight,0,0,i,imgHeight);

                }else
                    i=0

                i+=3;
            }
            curCanvas = curCanvas === 'a' ? 'b' : 'a';
            return canvas;
        }


        viewer.entities.add({
            name: 'Rotating rectangle with rotating texture coordinate',
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(-90.0, 30.0, -70.0, 35.0),
                material: new Cesium.ImageMaterialProperty({
                    // image: new Cesium.CallbackProperty(drawCanvas, false),
                    image: new Cesium.CallbackProperty(drawCanvasImage, false),
                    transparent: true
                }),
                // rotation: new Cesium.CallbackProperty(getRotationValue, false),
                // stRotation: new Cesium.CallbackProperty(getRotationValue, false)
            }
        });
    </script>
</body>

</html>